import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router';
import './index.css'
import { NavBar, Toast } from 'antd-mobile'
import { Button } from 'react-vant';
import instance from '../../request/axios';

function index() {
    const data = useLocation().state.loadsh;
    console.log(data);
    const nav = useNavigate();
    const back = () => {
        nav(-1)
    }
    const [selectedValue, setSekectedValue] = useState('');

    const [radioText, setRadionText] = useState(50)
    const geteailsViewAll = (data: any) => {
        console.log(data)
        nav('/review', {
            state: {
                data
            }
        })
    }


    const hanleButton = () => {
        // 单选框选中获取对应
        switch (selectedValue) {
            case 'optionA':
                hangleOptionA();
                setRadionText(50)
                break;
            case 'optionB':
                hangleOptionB();
                setRadionText(50)
                break;
            case 'optionC':
                hangleOptionC();
                setRadionText(300)
                break;
            default:
                Toast.show('请选择')

        }
    }



    const hangleOptionA = () => {
        console.log('optionA')
        console.log(radioText);
        const id = new Date().getTime(); // 订单号
        const title = '服务'
        const total = radioText
        // 触发支付
        instance.get('/api/zf', {
            params: {
                id, title, total
            }
        }).then((res) => {
            console.log(res);
            // 打开页面
            window.location.href = res.data.url
        })

    }
    const hangleOptionB = () => {
        console.log('optionB')
        console.log(radioText);

    }
    const hangleOptionC = () => {
        console.log('optionC')
        console.log(radioText);
    }



    return (
        <div className='gedetails'>
            <NavBar onBack={back}>服务选择</NavBar>
            <div className='gedetails-header'>
                <div className='gedetails-header-img'>
                    <img className='img' src={data.image} alt="" />
                </div>
                <div className='gedetails-header-text'>
                    <div className='gedetails-header-top'>
                        <div className='getails-header-name'>
                            {data.name}
                        </div>
                        <div className='getails-header-type'>
                            {
                                data.type
                            }
                        </div>
                    </div>
                    <div className='gedetails-header-bottom'>
                        <div className='gedetails-header-bottom-text'>
                            {
                                data.address
                            }
                            {
                                data.hospital
                            }
                        </div>
                        <div className='geteails-header-bottom-keshi'>
                            {
                                data.keshi
                            }
                        </div>
                    </div>
                </div>
            </div>

            {/* 详情部分 */}
            <div className='gedetails-yis'>
                <div className='gedetails-review'>
                    暂无评论
                </div>
                <div className='geteails-yiss-text-Viewall' onClick={
                    () => geteailsViewAll(data)
                }>
                    查看全部 &gt;
                </div>
            </div>
            <div className='gedetails-yiss'>
                <div className='geteailsYissTextFind'>
                    <div className='geteails-yiss-text'>
                        <div className='getails-yiss-border'></div>
                        医生真实
                    </div>
                    <div className='geteails-yiss-text'>
                        <div className='getails-yiss-border'></div>
                        未使用随时退
                    </div>
                    <div className='geteails-yiss-text'>
                        <div className='getails-yiss-border'></div>
                        不满意可申诉
                    </div>
                </div>


            </div>

            <div className='gedetails-wenzhen'>
                <div className='gedetails-wenzhen-text'>
                    <div className='gedetails-wenzhen-textimg'>
                        <form>
                            <div className='gedetails-wenzhen-textimg1'>
                                <input type='radio' value='optionA' checked={selectedValue === 'optionA'} onChange={() => {
                                    setSekectedValue('optionA')
                                }} />
                                <div style={{
                                    fontSize: 14,
                                    fontWeight: "bold"
                                }} >
                                    电话问诊 50/元
                                </div>
                                <div className='gedetails-wenzhen-textimg2'>
                                    <div className='gedetails-wenzhen-textimg3'>
                                        需要对病情非常清楚的人和医生通话,并且提交齐全的病情资料
                                    </div>
                                    <div className='gedetails-wenzhen-textimg3'>
                                        通话前,建议准备号针对病情的具体问题,跟医生讨论或请医生讲解
                                    </div>
                                    <div className='gedetails-wenzhen-textimg4'>
                                        服务说明 &gt;
                                    </div>
                                </div>
                            </div>
                            <div className='gedetails-wenzhen-textimg1'>
                                <input type='radio' value='optionB' checked={
                                    selectedValue === 'optionB'
                                } onChange={() => {
                                    setSekectedValue('optionB')
                                }} />
                                <div style={{
                                    fontSize: 14,
                                    fontWeight: "bold"
                                }}>
                                    图文问诊 50/元
                                </div>
                                <div className='gedetails-wenzhen-textimg2'>
                                    <div className='gedetails-wenzhen-textimg3'>
                                        适合可以耐心等待医生回复的病情咨询
                                    </div>
                                    <div className='gedetails-wenzhen-textimg3'>
                                        有充分的问诊过程,可随时补充资料
                                    </div>
                                    <div className='gedetails-wenzhen-textimg4'>
                                        服务说明 &gt;
                                    </div>
                                </div>
                            </div>
                            <div className='gedetails-wenzhen-textimg1'>
                                <input type='radio' value='optionC' checked={selectedValue === 'optionC'} onChange={() => {
                                    setSekectedValue('optionC')
                                }} />
                                <div style={{
                                    fontSize: 14,
                                    fontWeight: "bold"
                                }} >
                                    视频问诊 300元
                                </div>
                                <div className='gedetails-wenzhen-textimg2'>
                                    <div className='gedetails-wenzhen-textimg3'>
                                        需要对病情非常清楚的人和医生通话,并且提交齐全的病情资料
                                    </div>
                                    <div className='gedetails-wenzhen-textimg3'>
                                        通话前,建议准备号针对病情的具体问题,跟医生讨论或请医生讲解
                                    </div>
                                    <div className='gedetails-wenzhen-textimg4'>
                                        服务说明 &gt;
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

            <div className='gedetailsdbbuttom'>
                {/* 底部盒子 */}
                <div className='demo-button'>
                    <Button type='primary' className='button' onClick={hanleButton}>立即申请</Button>
                </div>
            </div>
        </div>
    )
}

export default index